<!DOCTYPE html>
<html>
<head>
    <title>Package Generator</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <script src="Ajax.js" type="text/javascript"></script>
    <script>
        function selectAll(){
            var inputs = document.getElementsByTagName("input");
            Array.prototype.forEach.call(inputs, function(input){
                input.checked = true;
            });
        }

        function removeAll(){
            var inputs = document.getElementsByTagName("input");
            Array.prototype.forEach.call(inputs, function(input){
                input.checked = false;
            });
        }

        function generatePackage(){
            var file_name,
                files = [],
                ajax = new Ajax(),
                inputs = document.getElementsByTagName("input");
            Array.prototype.forEach.call(inputs, function(input){
                file_name = input.parentElement.children[1].innerText;
                if(input.checked === true){
                    files.push(file_name);
                }
            });
            ajax.setMethod("POST");
            ajax.setOnSuccessListener(function(data){
                window.location.href = "/get_file/"+data.data;
                //window.location.reload(true);
            });
            ajax.open("/generate_package", {files: files});
            ajax.send();
        }
    </script>
</head>
<body>
<header>
    <div>
        <a class="button accent" onclick="selectAll();" href="#select_all">Select all</a>
        <a class="button" onclick="removeAll();" href="#remove_all">Remove all</a>
        <h2>Javascript Library for mobile</h2>
    </div>
</header>
<section>
    <div class="wrapper">
        <div>
            <h1>Package Generator</h1>
            <h4>Select files depends on you project and create your <strong>package</strong></h4>
        </div>
        <div>
            <div class="clasess">
                <ul>
                <% files.forEach(function(item, i){ %>
                    <% if(Math.round(files.length/2) === i ){ %>
                     </ul>
                    <ul>
                    <%}%>
                    <li>
                        <label>
                            <input type="checkbox" name="class_<%=i%>" checked />
                            <span>
                                <%= item %>
                            </span>
                        </label>
                    </li>
                <% }) %>
                </ul>
            </div>
            <a class="big_button" onclick="generatePackage();" href="#get_file">Generate package</a>
        </div>
    </div>
</section>
</body>
</html>